import { LitElement, html } from "lit";

class ShouldUpdate extends LitElement {
    static get properties() {
        return {
            active: { type: Boolean },
            count: { type: Number }
        };
    }

    constructor() {
        super();

        this.active = true;
        this.count = 0;

        //每秒增加一个计数器。注意，即使渲染被阻止，javascript也会阻止
        //继续运行。属性的值在稍后再次打开呈现时
        //属性在该时刻再次被拾取。
        setInterval(() => {
            this.count += 1;
        }, 1000);
    }

    render() {
        return html`
      Current count: ${this.count}
      <button @click="${() => (this.active = !this.active)}">
        Toggle active
      </button>
    `;
    }

    // shouldUpdate函数接收一个带有已更改属性键的映射
    //指向它们之前的值。
    //在此基础上，你可以决定组件是否应该重新呈现。这
    //是有用的，例如块重新呈现组件时，它不是活动的
    //或in view。
    shouldUpdate(changedProperties) {
        return this.active;
    }
}

customElements.define("should-update", ShouldUpdate);
